$check-icon: "data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.5 4.5L5 8L11 2' stroke='currentColor' stroke-width='2' stroke-linecap='square'/%3e%3c/svg%3e";

.checkbox {
  --checkbox-default-size: 16px;
  --checkbox-default-color: var(--color-primary-surface-content);
  --checkbox-default-background-color: var(--color-neutral-background);
  --checkbox-default-border-color: var(--color-neutral-border);
  --checkbox-default-checked-color: var(--color-primary-surface-content);
  --checkbox-default-checked-background-color: var(--color-primary-surface);
  --checkbox-default-checked-border-color: var(--color-primary-border);
  --checkbox-default-hover-background-color: var(--color-neutral-surface);
  --checkbox-default-hover-color: var(--color-primary-surface-content);
  --checkbox-default-hover-border-color: var(--color-neutral-border-bold);
  --checkbox-default-checked-hover-color: var(--color-primary-surface-content);
  --checkbox-default-checked-hover-background-color: var(--color-primary-surface-hover);
  --checkbox-default-checked-hover-border-color: var(--grape_600);
  --checkbox-default-checked-focused-color: var(--color-primary-surface-content);
  --checkbox-default-checked-focused-background-color: var(--grape_800);
  --checkbox-default-checked-focused-border-color: var(--grape_800);
  --checkbox-default-disabled-background-color: var(--color-neutral-background);
  --checkbox-default-disabled-color: var(--color-neutral-content-subtlest);
  --checkbox-default-disabled-border-color: var(--color-neutral-border);
  --checkbox-default-indeterminate-gap: 3px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 100ms ease-out;
  color: var(--color-neutral-content);
  position: relative;


  // &:hover {
  //   box-shadow: none;
  //   &__box {
  //     background-color: var(--checkbox-hover-background-color, var(--checkbox-default-hover-background-color));
  //     color: var(--checkbox-hover-color, var(--checkbox-default-hover-color));
  //     border-color: var(--checkbox-hover-border-color, var(--checkbox-default-hover-border-color));
  //   }
  // }

  &_disabled {
    .checkbox {
      &__box {
        border-color: var(--checkbox-disabled-border-color, var(--checkbox-default-disabled-border-color));
      }

      &__check {
        background-color: var(--checkbox-disabled-background-color, var(--checkbox-default-disabled-background-color));
        color: var(--checkbox-disabled-color, var(--checkbox-default-disabled-color));

        &_checked::before,
        &_indeterminate::after {
          background-color: var(--checkbox-disabled-color, var(--checkbox-default-disabled-color));
        }
      }
    }
  }

  &:focus-within {
    .checkbox__box {
      border-color: var(--checkbox-checked-focused-border-color, var(--checkbox-default-checked-focused-border-color, #37447A));
      border-radius: 4px;
    }
  }

  &__box {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    display: inline-block;
    max-width: var(--checkbox-size, var(--checkbox-default-size));
    max-height: var(--checkbox-size, var(--checkbox-default-size));
    border: 1px solid var(--checkbox-border-color, var(--checkbox-default-border-color));
    color: var(--checkbox-color, var(--checkbox-default-color));
    border-radius: 4px;
    cursor: pointer;
    box-sizing: content-box;

    &_checked {
      border-color: var(--checkbox-checked-border-color, var(--checkbox-default-checked-border-color));
    }
  }

  &__input {
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    width: 100%;
    z-index: 10;
    height: 100%;
    border: none;
    position: absolute;
    cursor: pointer;
  }

  &__check {
    width: var(--checkbox-size, var(--checkbox-default-size));
    height: var(--checkbox-size, var(--checkbox-default-size));
    background: var(--checkbox-background-color, var(--checkbox-default-background-color));
    will-change: all;
    position: relative;
    display: block;
    transition: all 80ms ease;

    &::before,
    &::after {
      inset: 0;
      display: block;
      content: '';
      opacity: 0;
      position: absolute;
    }

    &::before {
      background-color: var(--checkbox-color, var(--checkbox-default-color));
      mask-image: url($check-icon);
      mask-repeat: no-repeat;
      mask-size: auto;
      mask-position: center;
      transition: all 120ms ease;
    }

    &_checked {
      background-color: var(--checkbox-checked-background-color, var(--checkbox-default-checked-background-color));
      color: var(--checkbox-checked-color, var(--checkbox-default-checked-color));
    }

    &_indeterminate::after {
      inset: calc(var(--checkbox-indeterminate-gap, var(--checkbox-default-indeterminate-gap)));
      border-radius: 2px;
      background-color: var(--checkbox-checked-background-color, var(--checkbox-default-checked-background-color));
      color: var(--checkbox-checked-color, var(--checkbox-default-checked-color));
      border-color: var(--checkbox-checked-border-color, var(--checkbox-default-checked-border-color));
    }

    &_checked::before,
    &_indeterminate::after {
      opacity: 1;
    }
  }

  &__label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-tight);
  }

  &:not(.checkbox_disabled) {
    cursor: pointer;

    &:hover {
      .checkbox {
        &__box {
          border-color: var(--checkbox-hover-border-color, var(--checkbox-default-hover-border-color));

          &_checked {
            border-color: var(--checkbox-checked-hover-border-color, var(--checkbox-default-checked-hover-border-color));
          }
        }

        &__check {
          background-color: var(--checkbox-hover-background-color, var(--checkbox-default-hover-background-color));
          color: var(--checkbox-hover-color, var(--checkbox-default-hover-color));

          &_checked,
          &_indeterminate::after {
            background-color: var(--checkbox-checked-hover-background-color, var(--checkbox-default-checked-hover-background-color));
            color: var(--checkbox-checked-hover-color, var(--checkbox-default-checked-hover-color));
          }
        }
      }
    }
  }

  &__input:checked + &__check::before {
    opacity: 1;
  }

}
